
<template>
  <ScrollContainer :style="{ height: scrollerHeight + 'px' }" class="diy-p5 diy-widget-panel" ref="wrapperRef">
    <a-layout style="background-color: #ffffff;">
      <a-layout-sider 
        width="50px" theme="light"
        :style="{ 
          overflow: 'auto', height: scrollerHeight + 'px', position: 'fixed', left: 0, top: '54px', bottom: 0
        }"
        :collapsed="false" :trigger="null" 
      >
        <MySingleMenu
          :style="{ width: '50px', height: scrollerHeight + 'px' }"
          v-model:selectedKey="state.selectedKey" :items="state.menuItems"
        >

        </MySingleMenu>
      </a-layout-sider>
    </a-layout>

    <a-layout style="background-color: #ffffff; margin-left: 45px; padding: 5px; word-break: break-all" >
      <a-layout-content style=" overflow: initial;">
        <div class="widget-collapse" v-if="state.selectedKey === 'comp'">
          <Collapse v-model:active-key="state.activeCollapseKey" ghost>
            <CollapsePanel key="containerComp" header="容器组件">
              <Draggable 
                tag="ul" :list="containersComp" item-key="id" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
                :move="checkContainerMove" @end="handleContainerDragEnd"
              >
                <template #item="{ element: ctn }">
                  <li 
                    class="container-widget-item" :title="ctn.displayName" 
                    :class="[ctn.disabledWidget ? 'disabled-widget' : '']"
                  >
                    <span >
                      <Icon :icon="ctn.icon" class="color-svg-icon" />
                      {{ ctn.displayName }}
                    </span>
                  </li>
                </template>
              </Draggable>
            </CollapsePanel>

            <CollapsePanel key="baseComp" header="基础组件">
              <Draggable 
                tag="ul" :list="basicFieldComp" item-key="id" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false"
                :move="checkContainerMove" @end="handleContainerDragEnd"
              >
                <template #item="{ element: ctn }">
                  <li 
                    class="container-widget-item" :title="t(`designer.widgetLabel.${ctn.type}`)" 
                    :class="[ctn.disabledWidget ? 'disabled-widget' : '']"
                  >
                    <span>
                      <Icon :icon="ctn.icon" class="color-svg-icon" />
                      {{ t(`designer.widgetLabel.${ctn.type}`) }}
                    </span>
                  </li>
                </template>
              </Draggable>
            </CollapsePanel>
          </Collapse>
        </div>

        <div v-else-if="state.selectedKey === 'formTemplate'">
          表单模块
        </div>
      </a-layout-content>
    </a-layout>
      
  </ScrollContainer>
</template>
<script lang="ts" name="diy-form-widget-panel" setup>
import { ref, computed, onMounted, nextTick, PropType } from 'vue';
import {containers as CONS, basicFields as BFS, advancedFields as AFS, customFields as CFS} from "./widgetsConfig"
import Draggable from "vuedraggable";
import type { CSSProperties } from 'vue';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { MySingleMenu } from '/@/components/Menu/index'
import { ScrollContainer } from '/@/components/Container';
import { Tabs, Collapse, CollapsePanel } from 'ant-design-vue';
import { buildUUID } from '/@/utils/uuid'
import type { Designer } from '../type'
import { useWidget } from '../form-widget/useWidget'

const { t } = useI18n('diyForm')
const TabPane = Tabs.TabPane
const { hasWidget } = useWidget()

const state = ref({
  activeCollapseKey: 'containerComp',
  selectedKey: 'comp',
  menuItems: [
    {
      key: 'comp',
      icon: 'ant-design:appstore-outlined',
      title: '组件',
    },
    {
      key: 'formTemplate',
      icon: 'ant-design:expand-outlined',
      title: '表单模板',
    },
  ]
})
const props = defineProps({
  scrollerHeight: { type: Number },
  designer: { type: Object as PropType<Designer>, default: () => {}}
})
const designer = props.designer

const wrapperRef = ref()
const containersComp = ref<any[]>([])
const basicFieldComp = ref<any[]>([])
onMounted(() => {
  loadWidgets()
})

const loadWidgets = () => {
  containersComp.value = CONS.map(con => {
    return {
      id: buildUUID(),
      ...con
    }
  }).filter( e => hasWidget(e.type))

  basicFieldComp.value = BFS.map(con => {
    return {
      id: buildUUID(),
      ...con
    }
  }).filter( e => hasWidget(e.type))
}

const handleContainerWidgetClone = (origin) => {
  console.log('========================> clone')
  return origin
}

const handleFieldWidgetClone = (origin) => {
  return designer?.copyNewFieldWidget(origin)
}

const checkContainerMove = (evt) => {
  // return this.designer.checkWidgetMove(evt)
}

const handleContainerDragEnd = (evt) => {
  
}

</script>

<style lang="less">
@import '../index.less';

.color-svg-icon {
  -webkit-font-smoothing: antialiased;
  color: #7c7d82;
}

.side-scroll-bar {
  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }
}

div.panel-container {
  padding-bottom: 10px;
}

.no-bottom-margin :deep(.el-tabs__header) {
  margin-bottom: 0;
}

.indent-left-margin {
  .ant-tabs-nav {
    width: 80px !important;
  }
}

.diy-widget-panel {

}

// 按钮禁用样式
.disabled-widget {
  background-color: #f2f2f2; /* 灰色背景 */
  color: #cccccc; /* 禁用状态的文本颜色 */
  pointer-events: none;
}


.ant-collapse-content-box ul > li {
  list-style: none;
}

.widget-collapse {
  border-top-width: 0;

  .ant-collapse-item {
    margin-left: -15px !important;
  }

  .ant-collapse-header {
    margin-left: 2px;
    margin-bottom: -10px;
    font-style: italic;
    font-weight: bold;
  }

  .ant-collapse-content-box {
    padding: 10px 0px 10px 20px !important;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-block-start: 0;

      &:after {
        content: "";
        display: block;
        clear: both;
      }

      .container-widget-item, .field-widget-item {
        // display: inline-block;
        height: 32px;
        line-height: 32px;
        width: 110px;
        margin: 5px;
        cursor: move;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e8e9eb;
        border-radius: 4px;
        padding: 0 8px;
      }

      .container-widget-item:hover, .field-widget-item:hover {
        background: #F1F2F3;
        border-color: @primary-color;

        .color-svg-icon {
          color: @primary-color;
        }
      }

      .drag-handler {
        position: absolute;
        top: 0;
        left: 160px;
        background-color: #dddddd;
        border-radius: 5px;
        padding-right: 5px;
        font-size: 11px;
        color: #666666;
      }
    }
  }
}

.el-card.ft-card {
  border: 1px solid #8896B3;
}

.ft-card {
  margin-bottom: 10px;

  .bottom {
    margin-top: 10px;
    line-height: 12px;
  }

  /*
  .image-zoom {
    height: 500px;
    width: 620px
  }
  */

  .ft-title {
    font-size: 13px;
    font-weight: bold;
  }

  .right-button {
    padding: 0;
    float: right;
  }

  .clear-fix:before, .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }

}
</style>
